<template lang="pug">
  ul.preview
    li(v-for="(brand, idx) in mains") {{ `${ idx + 1 }. ${brand.name}`  }} |

  form(@submit.native.prevent)

    label main brand:
    select(v-model="mainBrandId")
      option(disabled, value="undefined") select brand
      option(v-for="brand in mains" :key="brand.id" :value="brand.id") {{brand.name}}

    br
    label endorsed brand:
    select(v-model="endorsedBrandId")
      option(disabled, value="undefined") select brand
      option(v-for="brand in endorses" :key="brand.id" :value="brand.id") {{brand.name}}

    br
    label cooperated brand:
    select(v-model="cooperatedBrandId")
      option(disabled, value="undefined") select brand
      option(v-for="brand in cooperates" :key="brand.id" :value="brand.id") {{brand.name}}

    br
    input(type="text" v-model="formData.name" placeholder="name")
    button(type="submit" @click="handleSubmit" :disabled="!formData.name") create brand
    button(@click="resetFormData") Reset
</template>

<script setup>
import { ref, onMounted, watch, inject } from 'vue'
import api from '../apis/api'

const mainBrandId = inject('mainBrandId')
const endorsedBrandId = inject('endorsedBrandId')
const cooperatedBrandId = inject('cooperatedBrandId')
const brands = inject('brands')
const mains = inject('mains')
const endorses = inject('endorses')
const cooperates = inject('cooperates')
const colors = inject('colors')
const graphics = inject('graphics')
const compositions = inject('compositions')
const mashups = inject('mashups')
const schemes = inject('schemes')
const suites = inject('suites')
const formats = inject('formats')

const formData = ref({
  userId: 1,
  name: undefined,
  logo: undefined,
  isPublish: true,
  limit: {},
  endorsed: [],
  licensed: [],
  cooperated: [],
  authorized: [],
})
const brandId = ref(0)

function handleSubmit() {
  const res = api.post('brands', { ...formData.value })
  formData.value.name = undefined
}

const initialFormData = { ...formData.value, ...{ limit: {} } };
const resetFormData = () => {
  for (let key in initialFormData) {
    formData.value[key] = initialFormData[key];
  }
};

watch(mainBrandId, async () => getOriginDatas())
watch(endorsedBrandId, async () => getOriginDatas())
watch(cooperatedBrandId, async () => getOriginDatas())

const getOriginDatas = async () => {
  mains.value = await api.get('brands')
  endorses.value = await api.get(`brands`)
  cooperates.value = await api.get(`brands`)
  brands.value = { ...mains, ...endorses, ...cooperates }

  const brandIds = [mainBrandId.value, endorsedBrandId.value, cooperatedBrandId.value]

  colors.value = await __request('colors', brandIds)
  graphics.value = await __request('graphics', brandIds)
  compositions.value = await __request('compositions', brandIds)
  mashups.value = await __request('mashups', brandIds)
  schemes.value = await __request('schemes', brandIds)
  suites.value = await __request('suites', brandIds)
  formats.value = await __request('formats', brandIds)
}

async function __request(name, brandIds) {
  const fetchData = async (url) => await api.get(url)
  const requests = brandIds.map((id) => fetchData(`${name}?brandId=${id}`));
  const result = await Promise.all(requests);
  return result.reduce((acc, curr) => {
    curr.forEach(item => {
      if (!acc.find(i => i.id === item.id)) {
        acc.push(item);
      }
    });
    return acc;
  }, []);
  // 合并不去重result.reduce((acc, curr) => acc.concat(curr), []);
}

onMounted(async () => {
  mains.value = await api.get('brands')
})

</script>

<style scoped>
li {
  display: inline-block;
  padding: 0.2rem;
}
</style>
